import React, {useState} from 'react';
import {Layout, Menu} from "antd";
import {
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    DribbbleSquareOutlined,
    DatabaseOutlined,
    AppstoreOutlined
} from '@ant-design/icons';
import styled from "@emotion/styled";
import {Customize} from "./customize";
import {Redirect, Route, Switch, useHistory} from "react-router-dom";
import {NginxServer} from "./nginx";
import {WebShell} from "./webshell";

interface RouterItem {
    key: string;
    title: string;
    path: string;
    icon: React.ReactNode;
    component: React.ReactNode;
}

const routers:RouterItem[] = [
    {
        key: '1',
        title: '自定义服务',
        path: 'customize',
        icon: <DatabaseOutlined />,
        component: Customize
    },
    {
        key: '2',
        title: 'Nginx服务',
        path: 'nginx',
        icon: <DribbbleSquareOutlined />,
        component: NginxServer
    },
    {
        key: '3',
        title: 'WebShell',
        path: 'shell',
        icon: <AppstoreOutlined />,
        component: WebShell
    }
]

export const Application:React.FC = () => {

    let history = useHistory();

    const [collapsed, setCollapsed] = useState(false)

    const changePage = (path:string) => {
      history.push(path)
    }


    return <Container>
        <Layout.Sider trigger={null} collapsible collapsed={collapsed}>
            <div className="logo" />
            <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
                {
                    routers.map(item => <Menu.Item onClick={() => changePage(item.path)} key={item.key} icon={item.icon}>
                        {item.title}
                    </Menu.Item>)
                }
            </Menu>
        </Layout.Sider>
        <Layout className="site-layout">
            <Layout.Header className="site-layout-background" style={{ padding: 0 }}>
                {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                    className: 'trigger',
                    onClick: () => setCollapsed(!collapsed),
                })}
            </Layout.Header>
            <Layout.Content
                className="site-layout-background"
                style={{
                    margin: '24px 16px',
                    minHeight: 280,
                }}
            >
                <Switch>
                    <Route key="customize" path="/customize" component={Customize} />
                    <Route key="nginx" path="/nginx" component={NginxServer} />
                    <Route key="shell" path="/shell" component={WebShell} />
                    <Redirect to={'/nginx'} from={'/'} />
                </Switch>
            </Layout.Content>
        </Layout>
    </Container>
}

const Container = styled(Layout)`
  height: 100vh;
  .logo {
    height: 32px;
    margin: 16px;
    background: rgba(255, 255, 255, 0.3);
  }
  .site-layout .site-layout-background {
    background: #fff;
    .trigger {
      padding: 0 24px;
      font-size: 18px;
      line-height: 64px;
      cursor: pointer;
      transition: color 0.3s;
      &:hover {
        color: #1890ff;
      }
    }
    
  }
`